<template>
  <div>
    <div style="margin-bottom: 5px;text-align: right;">
      <el-button :disabled="disabled" type="danger" @click="addGroup">添加组</el-button>
      <el-button :disabled="disabled" type="primary" @click="addCol(null)">添加列</el-button>
    </div>
    <w-table
      :data="selectList"
      size="mini"
      :columns="columns"
      :is-paging="false"
    >
      <template slot="funcType" slot-scope="e">
        <enumItem
          v-model="e.row.FuncType"
          :readonly="true"
          :dic-key="EnumDic.PageFuncType"
          placeholder="函数类型"
          sys-head="form"
        />
      </template>
      <template slot="align" slot-scope="e">
        <span v-if="e.row.Align == 0">左对齐</span>
        <span v-else-if="e.row.Align == 1">居中</span>
        <span v-else-if="e.row.Align == 2">右对齐</span>
      </template>
      <template slot="isMerge" slot-scope="e">
        {{ e.row.IsMerge ? '是': '否' }}
      </template>
      <template slot="rowTrunCol" slot-scope="e">
        {{ e.row.RowTrunCol ? '是': '否' }}
      </template>
      <template slot="action" slot-scope="e">
        <el-button v-if="e.row.IsGroup" :disabled="disabled" type="primary" size="mini" icon="el-icon-plus" circle @click="addCol(e.row)" />
        <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="edit(e.row)" />
        <el-button :disabled="disabled" type="danger" size="mini" icon="el-icon-delete" circle @click="drop(e.row)" />
      </template>
    </w-table>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="800px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <el-form ref="valEdit" :model="itemVal" :rules="rules" label-width="120px">
        <el-form-item v-if="itemVal.IsGroup" label="标题" prop="Label">
          <el-input v-model="itemVal.Label" :maxlength="50" placeholder="标题" />
        </el-form-item>
        <template v-else>
          <el-form-item label="字段" prop="ColumnId">
            <formColChiose
              v-model="itemVal.ColumnId"
              :form-id="limitFormId"
              :is-mulite="false"
              :is-sys-col="true"
              @change="formChange"
            />
          </el-form-item>
          <el-form-item label="标题" prop="Label">
            <el-input v-model="itemVal.Label" :maxlength="50" placeholder="标题" />
          </el-form-item>
          <el-form-item label="别名" prop="Alias">
            <el-input v-model="itemVal.Alias" :maxlength="50" placeholder="别名" />
          </el-form-item>
          <el-form-item label="是否行转列" prop="RowTrunCol">
            <el-switch v-model="itemVal.RowTrunCol" :disabled="isDisabled()" />
          </el-form-item>
          <template v-if="itemVal.RowTrunCol == false">
            <el-form-item label="函数类型" prop="FuncType">
              <enumItem
                v-model="itemVal.FuncType"
                :disabled="disabled"
                :dic-key="EnumDic.PageFuncType"
                placeholder="函数类型"
                :multiple="false"
                sys-head="form"
              />
            </el-form-item>
            <el-form-item label="对齐方式" prop="Align">
              <el-select
                v-model="itemVal.Align"
                style="width: 100%"
                placeholder="对齐方式"
              >
                <el-option label="左" :value="0" />
                <el-option label="中" :value="1" />
                <el-option label="右" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="最小宽度" prop="MinWidth">
              <el-input-number v-model="itemVal.MinWidth" :step="1" :precision="0" placeholder="最小宽度" />
            </el-form-item>
            <el-form-item label="是否合并行" prop="IsMerge">
              <el-switch v-model="itemVal.IsMerge" />
            </el-form-item>
          </template>
          <el-form-item v-else label="分组依据" prop="GroupBy">
            <el-select v-model="itemVal.GroupBy" multiple style="width: 100%;" placeholder="分组依据">
              <el-option v-for="item in filterSelects()" :key="item.Alias" :label="item.Label" :value="item.Alias" />
            </el-select>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import { EnumDic } from '@/customForm/config/formConfig'
export default {
  components: {
    formColChiose
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    selects: {
      type: Array,
      default: null
    },
    limitFormId: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      EnumDic,
      selectList: [],
      title: null,
      visible: false,
      funcType: [0, 6, 7, 8, 9, 10, 11],
      id: 1,
      prt: null,
      rules: {
        Label: [
          {
            required: true,
            message: '标题不能为空！',
            trigger: 'blur'
          }
        ],
        Alias: [
          {
            required: true,
            message: '别名不能为空！',
            trigger: 'blur'
          }
        ]
      },
      itemVal: {
        Label: null,
        ColumnId: null,
        FuncType: 0,
        Alias: null,
        RowTrunCol: false,
        Align: 1,
        MinWidth: null,
        IsGroup: false,
        IsMerge: false
      },
      columns: [{
        key: 'Label',
        title: '字段标题',
        align: 'left',
        minWidth: 120
      }, {
        key: 'Alias',
        title: '字段别名',
        align: 'left',
        minWidth: 120
      }, {
        key: 'FuncType',
        title: '函数类型',
        align: 'left',
        minWidth: 120,
        slotName: 'funcType'
      }, {
        key: 'Align',
        title: '对齐方式',
        align: 'left',
        minWidth: 100,
        slotName: 'align'
      }, {
        key: 'MinWidth',
        title: '最小宽度',
        align: 'left',
        minWidth: 100
      }, {
        key: 'IsMerge',
        title: '是否合并行',
        align: 'left',
        minWidth: 100,
        slotName: 'isMerge'
      }, {
        key: 'RowTrunCol',
        title: '行转列',
        align: 'left',
        minWidth: 100,
        slotName: 'rowTrunCol'
      }, {
        key: 'Action',
        title: '操作',
        align: 'left',
        minWidth: 80,
        slotName: 'action'
      }]
    }
  },
  watch: {
    selects: {
      handler(val) {
        if (val) {
          this.$nextTick(this.reset)
        } else {
          this.selectList = []
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    handleClose() {
      this.visible = false
    },
    filterSelects() {
      if (this.selectList == null || this.selectList.length === 0) {
        return []
      }
      const list = []
      this.selectList.forEach(c => {
        if (c.IsGroup) {
          c.Children.forEach(a => {
            if (this.funcType.includes(a.FuncType) && a.Alias !== this.itemVal.Alias) {
              list.push(a)
            }
          })
        } else if (this.funcType.includes(c.FuncType) && c.Alias !== this.itemVal.Alias) {
          list.push(c)
        }
      })
      return list
    },
    formChange(val, col) {
      this.itemVal.Alias = col.Name
      this.itemVal.Label = col.Label
      this.itemVal.ColFuncType = col.FuncType
    },
    isDisabled() {
      return this.itemVal.ColFuncType !== 1 && this.itemVal.ColFuncType !== 3 && this.itemVal.ColFuncType !== 7
    },
    addGroup() {
      this.prt = null
      this.itemVal = {
        IsGroup: true,
        Label: null
      }
      this.visible = true
    },
    addCol(prt) {
      this.prt = prt
      this.itemVal = {
        Label: null,
        ColumnId: null,
        FuncType: 0,
        Alias: null,
        RowTrunCol: false,
        Align: 1,
        MinWidth: null,
        IsGroup: false,
        IsMerge: false,
        children: [],
        GroupBy: []
      }
      this.visible = true
    },
    save() {
      this.$refs['valEdit'].validate((valid) => {
        if (valid) {
          this.visible = false
          if (this.itemVal.id == null) {
            this.add()
          } else {
            this.set()
          }
        } else {
          return false
        }
      })
    },
    set() {
      if (this.itemVal.IsGroup) {
        this.prt.Label = this.itemVal.Label
      }
      if (this.itemVal.MinWidth === 0) {
        this.itemVal.MinWidth = null
      }
      this.prt.Label = this.itemVal.Label
      this.prt.FuncType = this.itemVal.FuncType
      this.prt.Alias = this.itemVal.Alias
      this.prt.ColumnId = this.itemVal.ColumnId
      this.prt.RowTrunCol = this.itemVal.RowTrunCol
      this.prt.Align = this.itemVal.Align
      this.prt.MinWidth = this.itemVal.MinWidth
      this.prt.IsMerge = this.itemVal.IsMerge
      this.prt.GroupBy = this.itemVal.GroupBy
      this.refresh()
    },
    add() {
      const add = Object.assign({}, this.itemVal)
      add.id = this.id
      this.id = this.id + 1
      if (add.IsGroup) {
        add.colSpan = {
          Label: 7
        }
      }
      if (add.MinWidth === 0) {
        add.MinWidth = null
      }
      if (this.prt == null) {
        add.gid = null
        this.selectList.push(add)
      } else {
        add.gid = this.prt.id
        if (this.prt.Children == null) {
          this.prt.Children = []
        }
        this.prt.Children.push(add)
      }
      this.refresh()
    },
    edit(row) {
      this.prt = row
      this.itemVal = Object.assign({}, row)
      this.visible = true
    },
    drop(row) {
      if (row.gid == null) {
        this.selectList = this.selectList.filter(c => c.id !== row.id)
      } else {
        const group = this.selectList.find(c => c.id === row.gid)
        group.Children = group.Children.filter(c => c.id !== row.id)
      }
      this.refresh()
    },
    refresh() {
      const datas = this.selectList.map(a => {
        const val = Object.assign({}, a)
        delete val.id
        delete val.colSpan
        delete val.ColFuncType
        if (a.Children && a.Children.length > 0) {
          val.Children = a.Children.map(c => {
            const t = Object.assign({}, c)
            delete t.id
            delete t.gid
            delete t.colSpan
            delete t.ColFuncType
            return t
          })
        }
        return val
      })
      this.$emit('input', datas)
      this.$emit('change', datas)
    },
    reset() {
      this.id = 1
      this.selectList = this.selects.map(a => {
        a.id = this.id
        this.id = this.id + 1
        if (a.Children && a.Children.length > 0) {
          a.Children.forEach(c => {
            c.id = this.id
            c.gid = a.id
            this.id = this.id + 1
          })
        }
        return a
      })
      this.refresh()
    }
  }
}
</script>
